<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="Loadimg" src="" alt="">
</body>
<script>
    class PreLoadImage {
        constructor(imgNode) {
            // 获取真实的DOM节点
            this.imgNode = imgNode
        }

        // 操作img节点的src属性
        setSrc(imgUrl) {
            this.imgNode.src = imgUrl
        }
    }
    class ProxyImage {
        // 占位图的url地址
        static LOADING_URL = '../../img/4.jpg'

        constructor(targetImage) {
            // 目标Image，即PreLoadImage实例
            this.targetImage = targetImage
        }

        // 该方法主要操作虚拟Image，完成加载
        setSrc(targetUrl) {
            // 真实img节点初始化时展示的是一个占位图
            this.targetImage.setSrc(ProxyImage.LOADING_URL)
            // 创建一个帮我们加载图片的虚拟Image实例
            const virtualImage = new Image()
            // 监听目标图片加载的情况，完成时再将DOM上的真实img节点的src属性设置为目标图片的url
            virtualImage.onload = () => {
                this.targetImage.setSrc(targetUrl)
            }
            // 设置src属性，虚拟Image实例开始加载图片
            virtualImage.src = targetUrl
        }
    }
    // 后续可以将这个封装为组件
    const img = document.getElementById('Loadimg')
    const preLoadImage = new PreLoadImage(img)
    const proxyImage = new ProxyImage(preLoadImage)
    // 传入真实图片地址
    proxyImage.setSrc("http://120.76.175.209:3000/static/upload/4.png")
</script>

</html>